<template>
  <q-layout class="hHh lpR fFf">
    <tool-header title="专题管理">
      <q-input dense outlined v-model="query.keywords" style="min-width: 60px"
               @keydown.enter="initList()"
               input-class="text-right" class="q-ml-md">
        <template v-slot:append>
          <q-icon v-if="query.keywords === ''" name="search"/>
          <q-icon v-else name="clear" class="cursor-pointer" @click="query.keywords = ''"/>
        </template>
      </q-input>
      <q-btn class="q-ma-sm" @click="handleClick()" color="secondary">新增</q-btn>
    </tool-header>
    <q-table
        title="专题管理"
        :data="data"
        :columns="columns"
        :table-colspan="pageSize"
        row-key="_id"
        separator="cell"
        :pagination.sync="pagination"
    >
      <template v-slot:body-cell-icon="props">
        <q-td :props="props">
          <img style="width: 96px;height: 96px" :src="props.value" alt="">
        </q-td>
      </template>
      <template v-slot:body-cell-permalink="props">
        <q-td :props="props">
          <a :href="props.value" target="_blank">{{ props.value }}</a>
        </q-td>
      </template>
      <template v-slot:body-cell-status="props">
        <q-td :props="props">
          <q-toggle
              v-model="props.row.isPublish"
              checked-icon="check"
              color="green"
              unchecked-icon="clear"
              @input="handleStatusChange(props.row)"
          />
        </q-td>
      </template>
      <template v-slot:body-cell-tags="props">
        <q-td :props="props">
          <tool-tag-chip v-for="tag in props.row.tags" :key="tag._id" :tag="tag">
          </tool-tag-chip>
        </q-td>
      </template>
      <template v-slot:body-cell-time="props">
        <q-td :props="props">
          <div>{{ props.row.updatedAt | dateFormat }}</div>
          <div>{{ props.row.createdAt | dateFormat }}</div>
        </q-td>
      </template>
      <template v-slot:body-cell-opt="props">
        <q-td :props="props">
          <q-btn class="q-ma-sm" label="查看数据">
            <q-popup-proxy>
              <q-card class="q-pa-md"
                      style="width: 600px;height: auto">
                <q-card-section>
                  <div class="text-h6">原始数据</div>
                </q-card-section>
                <q-separator inset="6"/>
                <q-card-section>
                  <json-view :data="props.row"/>
                </q-card-section>
              </q-card>
            </q-popup-proxy>
          </q-btn>
          <q-btn class="q-ma-sm" color="primary" @click="handleDelete(props.row)">删除</q-btn>
          <q-btn class="q-ma-sm" color="primary" @click="handleClick(props.row)">编辑</q-btn>
        </q-td>
      </template>
    </q-table>
    <!--工具编辑弹窗-->
    <q-dialog v-model="dialogVisible" title="标签配置">
      <q-card style="width: 800px">
        <q-card-section>
          <div class="text-h6">编辑</div>
        </q-card-section>
        <q-card-section class="q-pt-none">
          <q-input v-model="formData.name" label="名称"/>
          <q-input v-model="formData.color" label="标签颜色"/>
          <q-input v-model="formData.description" label="描述"/>
          <q-separator class="q-mt-md"></q-separator>
          <div class="q-mt-md">
            <div class="text-subtitle1">专题标签</div>
            <tool-tag-chip-group v-model="formData.tags"></tool-tag-chip-group>
          </div>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn @click="dialogVisible = false">取 消</q-btn>
          <q-btn type="primary" @click="submit()" :loading="isLoading">确 定</q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-layout>
</template>

<script>

import { cloneDeep } from 'lodash'
import ToolHeader from 'pages/ToolMangement/components/ToolHeader'
import ToolTagChip from 'components/ToolTagChip'
import ToolTagChipGroup from 'components/ToolTagChipGroup'
import iTopic from '../../api/topic'

export default {
  name: 'Topic',
  components: {
    ToolHeader,
    ToolTagChip,
    ToolTagChipGroup
  },
  data () {
    return {
      tagList: [],
      columns: [
        { name: 'name', label: '名称', field: 'name', sortable: true, align: 'left' },
        { name: 'status', label: '发布状态', field: 'status', align: 'left' },
        { name: 'color', label: '专题颜色', field: 'color', sortable: true, align: 'left' },
        { name: 'description', label: '专题介绍', field: 'description', sortable: true, align: 'left' },
        { name: 'tags', label: '相关标签', field: 'tags', sortable: true, align: 'left' },
        { name: 'time', label: '更新&创建时间', align: 'left' },
        { name: 'opt', label: '操作', align: 'center' }
      ],
      data: [],
      pagination: {
        page: 1,
        rowsPerPage: 10
      },
      pageNo: 1,
      pageSize: 10,
      dialogVisible: false,
      formData: {},
      isLoading: false,
      query: {
        keywords: ''
      }
    }
  },
  async mounted () {
    await this.initList()
  },
  methods: {
    async initList () {
      const tagList = await iTopic.findAll.post({
        query: {
          keywords: this.query.keywords
        }
      })
      this.tagList = this.data = tagList
      // 增加v-model中的isPublish字段与status对应，并将数字转化为bool型
      // 对列表逐行操作
      this.data = this.data.map(e => {
        e.isPublish = !!e.status
        return e
      })
    },
    handleClick (row) {
      this.dialogVisible = true
      this.formData = cloneDeep(row || {
        name: '',
        description: '',
        color: '',
        tags: []
      })
      if (this.formData.icon) {
        this.imageUrl = row.icon
      }
    },
    async submit () {
      this.isLoading = true
      try {
        const tool = cloneDeep(this.formData)
        if (this.formData._id) {
          await iTopic.updateById({
            id: tool._id,
            update: tool
          })
        } else {
          await iTopic.create(tool)
        }
        this.dialogVisible = false
        await this.initList()
      } finally {
        this.isLoading = false
      }
    },
    handleDelete (e) {
      this.$q.dialog({
        title: '删除确认',
        message: '确认是否要删除？',
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await iTopic.deleteById({
          id: e._id
        })
        await this.initList()
      })
    },
    async handleStatusChange (topic) {
      await iTopic.updateStatus({
        id: topic._id,
        status: topic.isPublish ? 1 : 0
      })
    }
  }
}
</script>

<style lang="scss">

</style>
